<!--
 * @Description: 
 * @Author: xiao li
 * @Date: 2021-07-03 11:41:05
 * @LastEditTime: 2023-01-05 11:25:50
 * @LastEditors: xiao li
-->
<template>
  <div id="app">
    <router-view />
    <prompt></prompt>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import prompt from './components/prompt.vue'
export default {
  name: 'App',
  components: {
    prompt
  },
  provide () {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      isRouterAlive: true,
      status: '',
      isFirst: false,
      name: 'App',
      timer: null,
      previous: null,
      token: '',
      audio: null
    }
  },
  // 监听器
  watch: {
    async $route (to, from) {
    },
    'routesItem.police_num' (val, oldval) {
      let userInfo = JSON.parse(window.localStorage.getItem('massage_userInfo'))
      if (userInfo.is_admin === 1) {
        let { help_voice: voice } = this.routesItem
        if (val > oldval && !this.audio) {
          this.playAudio(voice)
        }
        if (val > 0) {
          this.audio.load()
          this.audio.src = voice
          this.audio.play()
        }

        if (val === 0 && this.audio) {
          this.audio.load()
          this.audio.src = ''
        }
      }
    }
  },
  created () {
    this.getNoticeCount()
    setInterval(() => {
      this.getNoticeCount()
    }, 10000)
  },
  mounted () {
    let that = this
    that.audio = null
    window.onresize = () => {
      that.fnThrottle(() => {
        let clientWidth = document.documentElement.clientWidth
        if (clientWidth < 1200) {
          that.$store.commit('handleAdSwitch', false)
        }
      }, 300)()
    }
  },
  computed: {
    ...mapState({
      routesItem: state => state.routes
    })
  },
  methods: {
    ...mapMutations(['changePromptData', 'changeIsShowPrompt', 'changeRoutesItem']),
    reload () {
      this.isRouterAlive = false
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    },
    async getNoticeCount () {
      let minitk = window.localStorage.getItem('massage_minitk')
      if (!minitk) return
      let { data } = await this.$api.shop.noLookCount()
      let { notice_num: notice = 0, police_num: police = 0, help_voice: voice = '' } = data
      this.changeRoutesItem({ key: 'notice_num', val: notice })
      this.changeRoutesItem({ key: 'police_num', val: police })
      let userInfo = JSON.parse(window.localStorage.getItem('massage_userInfo'))
      if (userInfo.is_admin === 1 && police > 0 && this.audio && this.audio.paused) {
        this.audio.load()
        this.audio.src = voice
        this.audio.play()
      }
      this.changeRoutesItem({ key: 'help_voice', val: voice })
    },
    playAudio (voice) {
      let that = this
      this.audio = new Audio()
      this.audio.src = voice
      this.audio.loop = true
      let playPromise
      playPromise = this.audio.play()
      if (playPromise) {
        playPromise.then((res) => {
          console.error(res, '音频加载成功')
          that.audio.pause()
        }).catch((e) => {
          console.error(e, '音频加载失败')
        })
      }
    },
    fnThrottle (fn, delay, atleast) {
      let that = this
      return function () {
        let now = +new Date()
        if (!that.previous) that.previous = now
        if (atleast && now - that.previous > atleast) {
          fn()
          that.previous = now
          clearTimeout(that.timer)
        } else {
          clearTimeout(that.timer)
          that.timer = setTimeout(function () {
            fn()
            that.previous = null
          }, delay)
        }
      }
    }
  }
}
</script>

<style lang='scss'>
@import url('./style/reset.css');
@import url('./style/icon.css');
@import url('./style/base.css');
@import url('./style/diy.css');
@import url('./style/common.css');
</style>
